<template>
  <view class="chat-item">
    <wd-swipe-action>
      <view class="flex items-center px-30rpx py-24rpx bg-white" @click="handleClick">
        <!-- 头像部分 -->
        <view class="avatar-wrap relative mr-30rpx">
          <image
            :src="chat.headImage || '/static/images/avatar.png'"
            class="w-90rpx h-90rpx rounded-50%"
          />
          <view
            v-if="chat.unreadCount"
            class="unread-badge absolute -top-12rpx -right-12rpx bg-[#ff3b30] rounded-full"
          >
            {{ Number(chat.unreadCount) > maxNum ? `${maxNum}+` : chat.unreadCount }}
          </view>
        </view>

        <!-- 内容部分 -->
        <view class="flex-1 border-b border-[#f5f5f5] pb-24rpx">
          <view class="flex justify-between items-center">
            <text class="title text-30rpx font-bold text-[#3D3D3D] truncate max-w-400rpx">
              {{ chat.showName }}
            </text>
            <text class="time text-22rpx text-[#999999]">
              {{ toTimeText(chat.lastSendTime, false) }}
            </text>
          </view>

          <view class="mt-16rpx flex justify-between items-center">
            <view class="flex items-center">
              <text v-if="chat.sendNickName" class="sender text-22rpx text-[#999999] mr-8rpx">
                {{ chat.sendNickName }}:
              </text>
              <rich-text
                class="message text-22rpx text-[#999999] truncate max-w-460rpx chat-content-text"
                :nodes="chat.lastContent"
              ></rich-text>
            </view>
          </view>
        </view>
      </view>

      <!-- 右滑删除按钮 -->
      <template #right>
        <view
          class="delete-btn bg-[#ff3b30] flex items-center justify-center px-36rpx"
          @click="handleRemove(chat)"
        >
          <text class="text-white text-26rpx">移除</text>
        </view>
      </template>
    </wd-swipe-action>
  </view>
</template>

<script setup lang="ts">
import { toTimeText } from '@/common/date'
import { useChatStore } from '@/store'
const chatStore = useChatStore()
const props = defineProps({
  chat: {
    type: Object,
    required: true,
  },
  index: {
    type: Number,
    required: true,
  },
  active: {
    type: Boolean,
    default: false,
  },
})
const maxNum = ref(99)

const emit = defineEmits(['click'])

const handleClick = () => {
  emit('click', props.chat)
}
function handleRemove(chat) {
  chatStore.removeGroupChat(chat.targetId)
}
</script>

<style lang="scss" scoped>
.unread-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32rpx;
  height: 32rpx;
  padding: 0 8rpx;
  font-size: 22rpx;
  color: #fff;
}

.delete-btn {
  height: 100%;
}
.chat-content-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  img {
    width: 40rpx !important;
    height: 40rpx !important;
  }
}
</style>
